﻿<template>
    <div style="display:flex;">
      <el-select v-model="prov" style="width: 33%" @change="changeProv">
        <el-option v-for="(option,index) in arr" :value="option.name" :key="index">
          {{ option.name }}
        </el-option>
      </el-select>
      <el-select v-model="city" style="width: 33%" @change="changeCity">
        <el-option v-for="(option,index) in cityArr" :value="option.name" :key="index" >
          {{ option.name }}
        </el-option>
      </el-select>
    </div>
  </template>
  <script>
  import area from "./area.js"; //这里引入城市信息
  export default {
    name: "Select",
    props: {
      showArea: {
        type: Boolean,
        default: true,
      },
      imProv: {
        type: String,
        default: "省份",
      },
      imCity: {
        type: String,
        default: "城市",
      },
     
    },
    data() {
      return {
        arr: area.arrAll,
        prov: this.imProv,
        city: this.imCity,
       
        cityArr: [],
     
      };
    },
    methods: {
      changeProv() {
        this.updateCity();
 
        if (
          this.prov !== "省份" &&
          this.city !== "城市" 
      
        ) {
          this.$emit("getSite", this.prov, this.city);
        }else{
          this.prov="省份"
          this.city="城市"
   
          this.$emit("getSite", this.prov, this.city);
        }
      },
      changeCity() {
        if (
          this.prov !== "省份" &&
          this.city !== "城市" 
        ) {
          this.$emit("getSite", this.prov, this.city);
        }else{
          this.prov="省份"
          this.city="城市"
          this.$emit("getSite", this.prov, this.city);
        }
      },
      updateCity: function () {
        for (var i in this.arr) {
          var obj = this.arr[i];
          if (obj.name) {
            if (obj.name == this.prov) {
              this.cityArr = obj.sub;
              break;
            }
          }
        }
        if (!this.cityArr[1] && this.cityArr[0]) {
          this.city = this.cityArr[0].name;
          return;
        }
        if (this.prov !== null) {
          this.city = this.cityArr[0].name;
        }
      },
    
    },
    beforeMount() {},
    watch: {
      imProv: function (val1, val2) {
        if (val1 !== "省份") {
          for (var i in this.arr) {
            var obj = this.arr[i];
            if (obj.name) {
              if (obj.name == val1) {
                this.cityArr = obj.sub;
              }
            }
          }
        }else{
          this.prov="省份"
          this.city="城市"
    
          return false
        }
        this.prov = val1;
      },
      imCity: function (val1, val2) {
        if (val1 !== "城市") {
          for (var i in this.cityArr) {
            var obj = this.cityArr[i];
            if (obj.name == val1) {
             
            }
          }
        }else{
          this.prov="省份"
          this.city="城市"
         
          return false
        }
        this.city = val1;
      },
     
    },
  };
  </script>
            
  